<%--
  Created by IntelliJ IDEA.
  User: 兀兀
  Date: 2019/11/22
  Time: 16:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/commonPage/common.jsp"%>
<html>
<head>
<title>联盟资讯管理</title>
</head>
<style>
	/*设置editor高度*/
	.w-e-text-container{
		height: 100% !important;/*!important是重点，因为原div是行内样式设置的高度300px*/
	}
	.editor-form{
		margin: 60px 40px;
	}
</style>
<script type="text/javascript" src="${base}/script/wangEditor.min.js"></script>
<body style="overflow: hidden;">
	<%--顶部工具栏--%>
	<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="addBtn">添加文章</button>
        <button class="layui-btn layui-btn-sm layui-bg-red" lay-event="deleteBtn">删除选择</button>
    </div>
</script>

	<div style="width: 100%; height: 100%; background: #fff;">
		<table class="layui-hide" id="grid" lay-filter="grid"
			style="height: 100%; width: 100%; overflow: hidden;"></table>
	</div>
	
	<div id="editor_div" style="display: none; height: 85%;">
		<div style="width: 50%;height: 100%;float: left;">
			<form class="layui-form layui-form-pane">
				<a id="id" style="display: none;"></a>
				<div style="margin: 20px; padding: 20px;">
					<div style=" width: 150px; height: 150px; overflow: hidden;">
						<img id="imgDiv" src="${base}/images/img.png" style="height: 100%; width: 100%;">
					</div>
					<div style="width: 150px; text-align: center;">点击图片框上传</div>
				</div>
				<div class="layui-form-item layui-form-text editor-form">
					<label class="layui-form-label">标题<font  color="#ff0000">*</font></label>
					<div class="layui-input-block">
						<textarea placeholder="请输入标题" id="title" class="layui-textarea"></textarea>
					</div>
				</div>
				<div class="layui-form-item editor-form">
					<label class="layui-form-label">时间<font  color="#ff0000">*</font></label>
					<div class="layui-input-block">
						<input type="text" id="time" placeholder="时间" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item layui-form-text editor-form">
					<label class="layui-form-label">备注</label>
					<div class="layui-input-block">
						<textarea placeholder="请输入备注" id="reamrk" class="layui-textarea"></textarea>
					</div>
				</div>
			</form>
		</div>
		<div style="width: 50%;height: 100%;float: left;">
			<div id="editor" style="margin: 40px"></div>
		</div>
	</div>
</body>
<script>
	var table = null;
	var editor;

	$(function() {
		var E = window.wangEditor;
		editor = new E('#editor');
		// 配置服务器端地址
		editor.customConfig.uploadImgServer = '${base}/ImageBatchUpload';
		editor.customConfig.uploadFileName = 'files';

		//可使用监听函数在上传图片的不同阶段做相应处理
		editor.customConfig.uploadImgHooks = {
			before : function(xhr, editor, files) {
				// 图片上传之前触发
				// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

				// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
				// return {
				//     prevent: true,
				//     msg: '放弃上传'
				// }
			},
			success : function(xhr, editor, result) {
				// 图片上传并返回结果，图片插入成功之后触发
				// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
			},
			fail : function(xhr, editor, result) {
				// 图片上传并返回结果，但图片插入错误时触发
				// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
			},
			error : function(xhr, editor) {
				// 图片上传出错时触发
				// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
			},
			timeout : function(xhr, editor) {
				// 图片上传超时时触发
				// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
			},

			// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
			// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
			customInsert : function(insertImg, result, editor) {
				// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
				// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

				// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
				console.log(result)
				var url = result.url
				insertImg(url)

				// result 必须是一个 JSON 格式字符串！！！否则报错
			}
		}

		editor.create();
	});

	layui.use(['table','laydate','upload'], function() {
		table = layui.table;
		var laydate = layui.laydate;
		var upload = layui.upload;
		//日期
		laydate.render({
			elem: '#time'
		});

		table.render({
			elem : '#grid',
			type : "post",
			toolbar : "#toolbar",
			url : '${base}/admin/unionInformationManagerController/listInfomation',
			page : { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
				layout : [ 'limit', 'count', 'prev', 'page', 'next', 'skip' ] //自定义分页布局
				//,curr: 5 //设定初始在第 5 页
				,
				groups : 1 //只显示 1 个连续页码
				,
				first : false //不显示首页
				,
				last : false //不显示尾页
				,
				position : 'bottom'
			},
			height : $(document).height() - $('#grid').offset().top - 20,
			cellMinWidth : 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			,
			cols : [ [ {
				type : 'checkbox',
				fixed : 'left'
			}, {
				field : 'title',
				title : '标题',
				align : 'left',
				event : 'detial',
				style : 'cursor: pointer'
			} , {
				field : 'time',
				title : '时间',
				align : 'center',
				sort : true,
				width : 180,
				templet: "<div>{{layui.util.toDateString(d.time, 'yyyy-MM-dd')}}</div>",
				style : 'cursor: pointer'
			} ] ],
			parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
				//console.log(res)
				return {
					"code" : res.code, //解析接口状态
					"count" : res.total, //解析数据长度
					"data" : res.data
				//解析数据列表
				};
			}
		});

		//图片上传方法
		var uploadInst = upload.render({
			elem: '#imgDiv' //绑定元素
			,url: '${base}/fileUpload' //上传接口
			,accept: 'images' //允许上传的文件类型
			,acceptMime:'image/*'
			,size: 2000 //最大允许上传的文件大小 200kb
			,multiple:false//是否允许多文件上传
			,before:function () {
				loadIndex = LoadWait("正在上传。。。");
			}
			,done: function(res){
				layer.closeAll(loadIndex);
				//上传完毕回调
				if (res.result){
					layer.msg("图片上传成功！"+res.message);
					$("#imgDiv").attr('src',res.message);
				}else{
					layer.msg("上传失败！");
				}
			}
			,error: function(){
				layer.msg("图片上传失败！")
				//请求异常回调
			}
		});

		//头工具栏事件
		table.on('toolbar(grid)', function(obj) {
			switch (obj.event) {
			case "addBtn":
				addInfomation();
				break;
			case "deleteBtn":
				var checkStatus = table.checkStatus(obj.config.id);
				var data = checkStatus.data;
				var ids = new Array();
				data.forEach(function(n, i) {
					ids.push(n.id);
				});
				deleteInfomation(ids);
				break;
			}
		});

		//监听单元格事件
		table.on('tool(grid)', function(obj) {
			var data = obj.data;
			clearInfomation();
			fillInformation(data);
			if (obj.event === 'detial') {
				layer.open({
					type : 1,
					title : false,
					closeBtn : false,
					id : 'LAY_layuipro' //设定一个id，防止重复弹出
					, moveType : 1 //拖拽模式，0或者1
					, btnAlign: 'c',
					area : [ '100%', '100%' ],//['60%','60%'],
					content : $("#editor_div"), //弹出窗口
					btn : [ '保存', '取消' ],
					offset : [ '0', '0' ],
					yes : function(index, layero) {
						if ($("#time").val() == "" || $("#title").val() == '' || editor.txt.html() == '<p><br></p>' || $("#imgDiv").attr('src') == '') { //验证必填信息是否填写
							layer.alert('请确认标题、图片、时间和编辑框等内容不为空哟', {
								icon : 5,
								title : "提示"
							});
							return;
						}else{
							$.ajax({
								type : "post",
								dataType : "json",
								url : '${base}/admin/unionInformationManagerController/updateFunc',
								data : {
									id : $("#id").val(),
									title : $("#title").val(),
									imgUrl : $("#imgDiv").attr('src'),
									time : $("#time").val(),
									context : editor.txt.html(),
									reamrk : $("#reamrk").val()
								},
								success : function(data) {
									if (data.result) {
										layer.msg("修改成功！");
										layer.close(index);
										table.reload("grid");
									} else {
										layer.msg(data.message);
									}
								}
							})
						}
						
					}
				});
			}
		});

	});

	/*添加文章方法*/
	function addInfomation() {
		clearInfomation();
		layer.open({
			type : 1,
			title : false,
			closeBtn : false,
			id : 'LAY_layuipro' //设定一个id，防止重复
			,moveType : 1 //拖拽模式，0或者1
			,btnAlign: 'c'
			,area : [ '100%', '100%' ],//['60%','60%'],
			content : $("#editor_div"), //弹出窗口
			btn : [ '保存', '取消' ],
			offset : [ '0', '0' ],
			yes : function(index, layero) {
				if ($("#time").val() == "" || $("#title").val() == '' || editor.txt.html() == '<p><br></p>' || $("#imgDiv").attr('src') == '') { //验证必填信息是否填写
					layer.alert('请确认标题、图片、时间和编辑框等内容不为空哟', {
						icon : 5,
						title : "提示"
					});
					return;
				}else{
					$.ajax({
						type : "post",
						dataType : "json",
						url : '${base}/admin/unionInformationManagerController/addInfomation',
						data : {
							imgUrl : $("#imgDiv").attr('src'),
							title : $("#title").val(),
							time : $("#time").val(),
							context : editor.txt.html(),
							reamrk : $("#reamrk").val()
						},
						success : function(data) {
							if (data.result) {
								layer.msg("添加成功！");
								layer.close(index);
							} else {
								layer.msg(data.message);
							}
						}
					});
				}
				
				table.reload("grid");

			}
		});
	}

	/*删除文章方法*/
	function deleteInfomation(ids) {
		if (ids.length == 0) {
			layer.msg("请选择需要删除的行!");
		} else {
			$.ajax({
				type : "post",
				dataType : "json",
				url : '${base}/admin/unionInformationManagerController/deleteInformation',
				data : {
					ids : ids
				},
				success : function(data) {
					if (data.result) {
						layer.msg("删除成功！");
					} else {
						layer.msg("删除失败！");
					}
				}
			})
			table.reload("grid");
		}
	}

	function fillInformation(data) {
		$("#id").val(data.id);
		$("#title").val(data.title);
		$("#imgDiv").attr('src',data.imgUrl);
		$("#time").val(data.time);
		editor.txt.html(data.context); //添加内容到富文本中
		//console.log(editor.txt.html())
		$("#reamrk").val(data.reamrk);
	}

	/*清空编辑框内容*/
	function clearInfomation() {
		$("#id").val("");
		$("#imgDiv").attr('src','');
		$("#title").val("");
		$("#time").val("");
		editor.txt.clear();
		$("#reamrk").val("");
	}
</script>
</html>
